<template>
	<div>
		<div style="display: flex;">
			<!-- 添加轮播图按钮 -->
			<div>
				<el-tooltip content="添加轮播图" placement="top">
					<el-button type="primary" icon="el-icon-plus" @click="showDialog()">添加</el-button>
				</el-tooltip>
			</div>
			<!-- 轮播图 -->
			<div style="width: 100%; height: 100%; display: flex; justify-content: center;">
				<el-carousel type="card" style="width: 60%;">
					<el-carousel-item v-for="(item,index) in carouselList" :key="index">
						<div style="position:relative;">
							<el-image :src="item.img" fit="contain" />
							<h3 class="carousel-text">{{ item.usedcarTitleName }}</h3>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<!--轮播图数据显示-->
		<el-table :data="carouselList" align="center">
			<el-table-column label="所属商家" prop="shopName" width="200px" align="center" />
			<el-table-column label="车辆名称" prop="usedcarTitleName" width="400px" align="center" />
			<el-table-column label="上牌时间" prop="licenseTime" width="90px" align="center" />
			<el-table-column label="行驶里程" prop="driveMileage" align="center" />
			<el-table-column label="颜色" prop="colour" align="center" />
			<el-table-column label="排放标准" prop="emissionStandard" align="center" />
			<el-table-column label="车型级别" prop="model" width="100px" align="center" />
			<el-table-column label="价格(单位：万)" prop="price" width="120px" align="center" />
			<el-table-column label="操作时间" prop="operationTime" width="180px" align="center" />
			<!-- 删除操作 -->
			<el-table-column label="操作" width="150" fixed="right" align="center">
				<template #default="scope">
					<el-button icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" type="danger">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--新增轮播图-->
		<el-dialog title="添加轮播图" width="80%" :model-value="dialogVisible" :close-on-click-modal="false"
			@close="closeDialog">
			<el-row>
				<!-- 选择商家显示数据 -->
				<el-col :span="3">
					<div style="border: #c1c1c1 solid 1px; font-size: 16px; color: #909399; font-weight: bold;">商家</div>
					<el-scrollbar height="400px">
						<div v-for="item in sellerList">
							<el-button type="text" @click="clickSeller(item)">{{item.shopName}}</el-button>
						</div>
					</el-scrollbar>
				</el-col>
				<!-- 选择车辆显示数据 -->
				<el-col :span="21">
					<el-scrollbar height="400px">
						<el-table :data="usedcarList" align="center" border>
							<el-table-column label="品牌" prop="carBrand" align="center" />
							<el-table-column label="车系" prop="carSeries" align="center" />
							<el-table-column label="年款" prop="carYear" align="center" />
							<el-table-column label="排量" prop="carDisplacement" align="center" />
							<el-table-column label="版本" prop="carVersion" width="120px" align="center" />
							<el-table-column label="变速箱" prop="transmission" align="center" />
							<el-table-column label="上牌时间" prop="licenseTime" align="center" />
							<el-table-column label="行驶里程" prop="driveMileage" align="center" />
							<el-table-column label="颜色" prop="colour" align="center" />
							<el-table-column label="排放标准" prop="emissionStandard" align="center" />
							<el-table-column label="车型级别" prop="model" width="100px" align="center" />
							<el-table-column label="价格(单位：万)" prop="price" width="120px" align="center" />
							<el-table-column label="备注" prop="remark" align="center" />
							<el-table-column label="创建时间" prop="createTime" width="180px" align="center" />
							<el-table-column label="操作" width="150" fixed="right" align="center">
								<template #default="scope">
									<el-button type="success" icon="el-icon-check" @click="setCarousel(scope.row)">
										设置到轮播图</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-scrollbar>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		//使用inject导入引用的reload，然后直接调用即可
		inject: ["reload"],
		data() {
			return {
				//轮播图相关字段
				carousel: {
					id: 0,
					sellerId: 0,
					usedcarId: 0,
					operationTime: null,
				},
				//轮播图列表
				carouselList: [],
				//商家列表
				sellerList: [],
				//车辆列表
				usedcarList: [],
				dialogVisible: false //对话框是否显示标识
			}
		},
		mounted() {
			this.loadCarousel()
		},
		methods: {
			//加载轮播图
			loadCarousel() {
				let _this = this
				_this.$axios({
					method: 'get',
					url: '/carousel/findAllCarousel'
				}).then((resp) => {
					_this.carouselList = resp.data
				})
			},
			//显示对话框并请求商家数据，用于显示所有商家
			showDialog() {
				this.dialogVisible = true

				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/seller/listAllSellerForManager',
					data: {
						currentPage: 1,
						pageSize: 1000
					}
				}).then((resp) => {
					//商家列表
					_this.sellerList = resp.data.content
				})
			},
			//选择商家后请求车辆数据，用于显示此商家的所有车辆
			clickSeller(row) {
				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/usedcar/findAllBySellerId',
					data: {
						currentPage: 1,
						pageSize: 1000,
						params: {
							sellerId: row.id
						}
					}
				}).then((resp) => {
					//车辆列表
					_this.usedcarList = resp.data.content
				})
			},
			//关闭对话框后的处理
			closeDialog() {
				this.dialogVisible = false
				this.usedcarList = []
			},
			//添加设置轮播图
			setCarousel(row) {
				this.$confirm('确认要设置此车辆到轮播图吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					let _this = this;
					_this.$axios({
						method: 'post',
						url: '/carousel/add',
						data: {
							sellerId: row.sellerId,
							usedcarId: row.id
						}
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$message.success(resp.msg)
							_this.reload()
						}
						if (resp.code == 500) {
							_this.$message.error(resp.msg)
							_this.dialogVisible = false
						}
					})
				}).catch(() => {})
			},
			//删除某个轮播图
			handleDelete(index, row) {
				this.$confirm('确认删除吗？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					let _this = this
					_this.$axios({
						method: 'delete',
						url: '/carousel/delete/' + row.id,
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$message.success(resp.msg)
							_this.reload()
						}
					})
				}).catch(() => {
					console.log("取消删除")
				})
			}
		}
	}
</script>

<style scoped>
	.carousel-text {
		position: absolute;
		left: 15px;
		top: 75%;
		color: #55ff7f;
		font-size: 14px;
	}
</style>
